html,
body,
div,
p,
button,
span,
label {
	margin: 0;
	padding: 0;
	border: 0;
	line-height: 1.45;
	color: #181818;
	letter-spacing: 0.01605136436597111rem;
}

/* 背景图 */
html,
body {
	position: relative;
	min-height: 100vh;
	box-sizing: border-box;
	overflow: hidden;
	background-color: #181818;
}

/* 公共样式 */
button {
	border: none;
	outline: 0;
	background-color: transparent;
}


.exe {
	height: 100vh;
	font-size: 0.1926163723916533rem;
	display: flex;
	justify-content: center;
	background-color: #FFF;
}

.container {
	display: flex;
	flex-direction: column;
}

.main {
	padding: 0.25682182985553775rem 0.1926163723916533rem;
	line-height: 1.45;
	flex: 1;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

.main .logo {
	margin-top: 0.6420545746388443rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main .logo .title {
	font-size: 0.27287319422150885rem;
}

.main .logo .subtitle {
	font-weight: 500;
}

.main .content {
	width: 7.142857142857143rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}
.main .content.content_w_auto {
	width: auto;
}

.main .content .desc_wrap {
	display: flex;
	flex-direction: column;
}

.main .content .price {
	display: flex;
	align-items: baseline;
}

.main .content .price .item {
	display: flex;
	align-items: baseline;
}

.main .content .price .vip_price {
	position: relative;
}

.main .content .price .vip_price .num {
	font-size: 0.4173354735152488rem;
	font-weight: 600;
	color: #FF0200;
}

.main .content .price .vip_price .label {
	position: absolute;
	top: -0.16051364365971107rem;
	right: -0.9951845906902087rem;
	padding: 0.03210272873194222rem 0.06420545746388444rem;
	border-radius: 0.48154093097913325rem 0.9630818619582665rem 0.9630818619582665rem 0;
	font-size: 0.16051364365971107rem;
	color: #fff;
	background: linear-gradient(-90deg, #FE7135, #FB373A);
}

.main .content .price .old_price {
	text-decoration: line-through;
	color: #cdcdcd;
}

.main .showcase {
	width: 8.346709470304976rem;
	margin: 0.3852327447833066rem auto 0;
	display: flex;
	justify-content: space-between;
}

.main .showcase .item {
	padding: 0.1926163723916533rem 0.32102728731942215rem;
	border: 1px solid #181818;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}

.main .showcase .info {
	display: flex;
	flex-direction: column;
}

.main .showcase .lt {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.main .showcase .lt .item {
	width: 3.434991974317817rem;
	height: 0.9630818619582665rem;
	border-radius: 0.16051364365971107rem;
	overflow: hidden;
}

.main .showcase .tl {
	font-size: 0.22471910112359553rem;
	font-weight: 500;
}

.main .showcase .desc {
	font-size: 0.16051364365971107rem;
	color: #969696;
}

.main .showcase .rt {
	border-radius: 0.1926163723916533rem;
	height: 2.1508828250401284rem;
	padding: 0.25682182985553775rem 0.3852327447833066rem;
	background-color: #181818;
	flex: 1;
	justify-content: space-between;
}

.main .showcase .rt .tl {
	font-size: 0.28892455858747995rem;
	color: #fff;
	font-weight: 500;
}

.main .showcase .rt .desc {
	width: 2.054574638844302rem;
	display: inline-block;
}

.popup .pay_info {
	position: absolute;
	left: 50%;
	top: 50%;
	padding: 0.25682182985553775rem 0.1926163723916533rem;
	transform: translate(-50%, -50%);
	width: 3.691813804173355rem;
	border-radius: 0.1926163723916533rem;
	background-color: #fff;
}

.popup .pay_info .top {
	text-align: center;
	border-bottom: 1px solid #c0c0c0;
}
.popup .pay_info .price {
	color: #FF0200;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.popup .pay_info .price .num {
	font-size: 0.44943820224719105rem;
	font-weight: 500;
}

.popup .pay_info .middle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.popup .pay_info .middle .pay_type {
	display: flex;
	align-items: center;
}

.popup .pay_info .middle .item {
	width: 1.2841091492776886rem;
	height: 0.4173354735152488rem;
	margin-right: 0.09630818619582665rem;
	border: 1px solid #c0c0c0;
	border-radius: 0.06420545746388444rem;
	font-size: 0.1926163723916533rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.popup .pay_info .middle .item:last-of-type {
	margin-right: 0;
}

.popup .pay_info .middle .icon {
	width: 0.22471910112359553rem;
}

.popup .pay_info .middle .qrcode {
	width: 1.6051364365971108rem;
}

.popup .download {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6.741573033707866rem;
	height: 2.9213483146067416rem;
	padding: 0.25682182985553775rem;
	border-radius: 0.1926163723916533rem;
	transform: translate(-50%, -50%);
	background-color: #fff;
	border-radius: 0.3852327447833066rem;
}

.popup .close {
	position: absolute;
	right: 0.16051364365971107rem;
	top: 0.11235955056179776rem;
	padding: 0.08025682182985554rem;
	cursor: pointer;
}

.popup .download .progress_wrap {
	margin: 0.3852327447833066rem auto 0.6420545746388443rem;
	width: 6.035313001605137rem;
}

.popup .download .progress {
	position: relative;
	height: 0.12841091492776888rem;
	background-color: #DBDAEA;
}
.popup .download .progress .bar {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 10%;
	height: 100%;
	background-color: #227AFF;
}

.btn_group {
	width: 4.975922953451043rem;
	margin-top: auto;
	display: flex;
	justify-content: space-between;
}

.btn_group.btn_gropu_w_auto {
	width: auto;
}

.btn {
	width: 100%;
	max-width: 4.012841091492777rem;
	height: 0.5457463884430177rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: 6.420545746388443rem;
	border: 1px solid #c0c0c0;
	font-size: 0.1926163723916533rem;
	text-align: center;
	font-weight: 500;
	line-height: 0.5457463884430177rem;
	cursor: pointer;
}

.btn.active {
	color: #fff;
	background-color: #181818;
}



.popup {
	z-index: 91;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation-fill-mode: both;
	animation-name: fadeIn;
	animation-duration: 0.3s;
	opacity: 0;
}

.mask {
	z-index: 90;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #181818e1;
	animation-fill-mode: both;
	animation-name: fadeIn;
	animation-duration: 0.3s;
	opacity: 0;
}

.pointer {
	cursor: pointer;
}

.warn {
	color: #FF0200;
}

.gray {
	color: #969696;
}

.text-center {
	text-align: center;
}

.text-medium {
	font-weight: 500;
}

.text-capitalize {

	text-transform: capitalize;
}

.mt-4 {
	margin-top: 0.06420545746388444rem;
}

.mt-12 {
	margin-top: 0.1926163723916533rem;
}

.mt-16 {
	margin-top: 0.25682182985553775rem;
}

.mt-18 {
	margin-top: 0.28892455858747995rem;
}

.mt-20 {
	margin-top: 0.32102728731942215rem;
}

.mt-36 {
	margin-top: 0.5778491171749599rem;
}

.ml-4 {
	margin-left: 0.06420545746388444rem;
}
.ml-8 {
	margin-left: 0.12841091492776888rem;
}
.ml-20 {
	margin-left: 0.32102728731942215rem;
}
.ml-24 {
	margin-left: 0.3852327447833066rem;
}

.ml-67 {
	margin-left: 1.0754414125200642rem;
}

::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #CCC;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #CCC;
}

:-ms-input-placeholder {
	/* IE 10+ */
	color: #CCC;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: #CCC;
}

[v-cloak] {
	display: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes fadeOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}